<template>
  <div ref="container" id="container"></div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
// import * as THREE from 'three';

const props = defineProps({
  mainColor: {
    type: Array,
    default: () => [1.0, 1.0, 0.0], // 默认颜色为白色
  }
});
const container = ref(null);

// 定义全局变量
let scene, camera, renderer, clock, uniforms;

onMounted(() => {
  init();
  animate();
  window.addEventListener('resize', onWindowResize);
});

onUnmounted(() => {
  // 清理工作
  window.removeEventListener('resize', onWindowResize);
  renderer.dispose();
  scene = null;
  camera = null;
});

function init() {
  // 初始化场景、相机、渲染器等
  scene = new THREE.Scene();
  camera = new THREE.Camera();
  camera.position.z = 1;
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.value.appendChild(renderer.domElement);
  clock = new THREE.Clock(true);

  let geometry = new THREE.PlaneBufferGeometry(2, 2);

  uniforms = {
    iTime: { value: 0 },
    iTimeScale: { value: 0.1 }, // 添加初始值
    iResolution: { value: new THREE.Vector2() },
    uMainColor: { value: new THREE.Color(...props.mainColor) },
  };

  let material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: vertexShader(),
    fragmentShader: fragmentShader(),
  });

  let mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  onWindowResize();
}

function onWindowResize() {
  renderer.setSize(window.innerWidth, window.innerHeight);
  uniforms.iResolution.value.x = renderer.domElement.width;
  uniforms.iResolution.value.y = renderer.domElement.height;
}

function animate() {
  requestAnimationFrame(animate);
  uniforms.iTime.value = clock.getElapsedTime();
  renderer.render(scene, camera);
}
// 省略了 vertexShader 和 fragmentShader 函数的定义
// 以及其他可能的辅助函数

// Vertex shader remains unchanged
function vertexShader() {
  return `
                void main() {
                    gl_Position = vec4(position, 1.0);
                }
            `;
}

// The fragment shader is adapted from the provided ShaderToy code
function fragmentShader() {
  return `
   uniform vec2 iResolution;
uniform float iTime;
uniform float iTimeScale; // 时间缩放因子，调整以改变动画速度
uniform vec3 uMainColor;

// 伪随机数生成器
float random(float n) {
    return fract(sin(n) * 43758.5453123);
}

// 1D 噪声
float noise(float p) {
    float fl = floor(p);
    float fc = fract(p);
    return mix(random(fl), random(fl + 1.0), fc);
}

// 修改动画逻辑以引入更多变化和延长周期
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy;
    vec2 p = (2.0 * fragCoord.xy - iResolution.xy) / max(iResolution.x, iResolution.y);
    float scaledTime = iTime * iTimeScale; // 使用调整后的时间缩放因子

    // 添加多个运动模式以增加视觉效果的多样性
    for(int i = 1; i < 5; i++) {
        vec2 newp = p;
        float angle = 0.3 * float(i);
        newp.x += 0.5 / float(i) * sin(float(i) * p.y + scaledTime + angle) + 1.0;
        newp.y += 0.5 / float(i) * cos(float(i) * p.x + scaledTime + angle * 2.0) - 1.0;
        // 增加噪声扰动
        newp += 0.03 * vec2(noise(newp.x + scaledTime), noise(newp.y + scaledTime));
        p = newp;
    }

    vec3 col = vec3(1.0 - abs(sin(p.x * cos(scaledTime))), 1.0 - abs(cos(p.x + p.y * sin(scaledTime))), 1.0 - abs(sin(p.y))) * uMainColor;
    fragColor = vec4(col, 1.0);
}

void main() {
    mainImage(gl_FragColor, gl_FragCoord.xy);
}
    `;
}
</script>

<style scoped lang="less">
#container {
  width: 100vw;
  height: 100vh;
  position: absolute;
}
</style>
